<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js"></script>
    <script src="/js/layer/layer.js"></script>
</head>

<body>
<div id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        <ol>
            <li style="display: inline-block;margin-left: 10px">专业：</li>
            <#list prof as p>
                <li style="display: inline-block;margin-left: 10px" onclick="prof(${p.prof_id})">${p.prof_name}</li>
            </#list>
        </ol>
        <span>班级：</span>
        <ol v-for="(item,index) in re">
            <li>{{item.class_name}}</li>
        </ol>
        <input type="hidden" value=0 id="profId">
        <input type="hidden" value=0 id="classId">
    </form>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>学院</td>
                <td>专业</td>
                <td>班级</td>
                <td>学生姓名</td>
                <td>考试学科</td>
                <td>试卷名称</td>
                <td>考试时间</td>
                <td>学生成绩</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in result">
                <td>{{item.paper.teacher.dept.dept_name}}</td>
                <td>{{item.paper.aClass.prof.prof_name}}</td>
                <td>{{item.paper.aClass.class_name}}</td>
                <td>{{item.student.student_name}}</td>
                <td>{{item.paper.paper_name}}</td>
                <td>{{item.paper.teacher.course.course_name}}</td>
                <td>{{item.k_date}}</td>
                <td>{{item.score}}</td>
                <td><a href="#" @click="editEvent(item.id)">编辑</a> <a href="#" @click="delEvent(item.id)">删除</a></td>
            </tr>
            </tbody>
        </table>
        <div id="pagenav"></div>
    </div>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            result:[],
            re:[],
        }
    })
    var getentire=function (curr) {
        $.ajax({
            type:'GET',
            dataType:'json',
            url:'/teacher/student.do',
            data:{
                pageNum:curr||1,
                pageSize:3,
                'prof.prof_id':$("#profId").val(),
                class_id:$("#classId").val()
            },
            success:function (en) {
                app.result=en.page;
                app.re=en.class;
                laypage({
                    skin:'#40E0D0',
                    cont:'pagenav',
                    pages:en.totalPage,
                    curr:curr||1,
                    jump:function (obj,first) {
                        if(!first){
                            getentire(obj.curr);
                        }
                    }
                });
            },
        })
    }
    getentire();
    var prof=function (b) {
        $("#profId").val(b);
        $("#classId").val(0);
        getentire();
    }
</script>
</body>
</html>